<template>
  <div>
    <a href="javascript:;" :class="cls" :style="{fontSize: font_size ? ( font_size + 'px') : ''}" @click.stop="onClick">
      <slot>
      </slot>
    </a>
  </div>
</template>

<script>
  export default {
    props: {
      type: {
        type: String,
        default: ''
      },
      is_disable: {
        type: Boolean,
        default: false
      },
      is_plain: {
        type: Boolean,
        default: false
      },
      is_mini: {
        type: Boolean,
        default: false
      },
      font_size: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        last_click_time: 0
      }
    },
    methods: {
      onClick() {
        const click_time = new Date().getTime()
        if (click_time - this.last_click_time > 400)
          this.$emit('on-click')
        this.last_click_time = click_time
      }
    },
    computed: {
      cls() {
        var cls = 'weui-btn'

        if (this.is_mini)
          cls += ' weui-btn_mini'

        if (this.is_disable)
          cls += this.is_plain ? ' weui-btn_plain-disabled' : ' weui-btn_disabled'

        if (this.type == 'primary')
          cls += this.is_plain ? ' weui-btn_plain-primary' : ' weui-btn_primary'
        else if (this.type == 'warn')
          cls += this.is_plain ? ' weui-btn_plain-warn' : ' weui-btn_warn'
        else
          cls += this.is_plain ? ' weui-btn_plain-default' : ' weui-btn_default'

        return cls
      }
    }
  }
</script>

<style>
  @import '~weui/dist/style/weui.min.css';
</style>
